<!DOCTYPE HTML>
<html>

	<head>
		<title>生成带有logo的二维码</title>
		<meta charset="utf-8" />
		<style type="text/css">
			span {
				display: inline-block;
				width: 32px;
				height: 32px;
				zoom: 0.6;
			}
			
			label {
				cursor: pointer;
			}
		</style>
		<!--此处需要引入三个JS文件
		  一、jquery-1.8.2.js 
		  二、excanvas.js
		  三、qrcode.js
		  顺序要注意，不能乱了顺序；
		-->
		<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
		<script src="js/excanvas.js" type="text/javascript"></script>
		<script src="js/qrcode.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("#create").click(function() {
					var $content = $("#content").val();
					var src = ["img/", "aim", ".png"];
					switch(parseInt($("input:radio[name=icon]:checked").val())) {
						case 0:
							src[1] = "aim";
							break;
						case 1:
							src[1] = "dropbox";
							break;
						case 2:
							src[1] = "etsy";
							break;
						default:
							break;
					}
					src = src.join("");
					createQrCode($content, src)
				})
			})

			function createQrCode(content, src) {
				$("#container").html("").qrcode({
					render: 'canvas',
					'text': utf16ConvertToUtf8(content),
					height: 200,
					width: 200,
					//logo图片地址
					src: src
				});
			}

			function utf16ConvertToUtf8(str) {
				var out, i, len, c;
				out = "";
				len = str.length;
				for(i = 0; i < len; i++) {
					c = str.charCodeAt(i);
					if((c >= 0x0001) && (c <= 0x007F)) {
						out += str.charAt(i);
					} else if(c > 0x07FF) {
						out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
						out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
						out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
					} else {
						out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
						out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
					}
				}
				return out;
			}
		</script>

	</head>

	<body>
		<input type="text" id="content" value="hello world" />
		<label><input type="radio" name="icon" value="0" checked="checked"/>aim <span style="background-image: url(img/aim.png);"></span></label>
		<label><input type="radio" name="icon" value="1" />dropbox <span style="background-image: url(img/dropbox.png);"></span></label>
		<label><input type="radio" name="icon" value="2" />dropbox <span style="background-image: url(img/etsy.png);"></span></label>
		<input type="button" value="生成二维码" id="create" />
		<div id="container" style="margin:auto; position:relative;"></div>
	</body>

</html>